<!--
 * @Author: chenzechao
 * @Date: 2024-01-08 14:11:12
 * @LastEditors: chenzechao
 * @LastEditTime: 2024-01-26 11:10:25
 * @FilePath: \accesscontrolui\src\components\panel.vue
 * @Description: 统一页面样式
-->
<template>
  <div class="panel-container">
    <div class="container-search">
      <slot name="search"></slot>
    </div>
    <div class="container-table">
      <slot name="table"></slot>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
$bgColor: rgba(255, 255, 255, 1);
.panel {
  border-radius: 4px;
  background: $bgColor;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12);
}
.panel-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .container-search {
    @extend .panel;
    padding: 20px 0px 0px 20px;
    :deep(.el-form-item) {
      display: inline-flex;
    }
    :deep(.search-button) {
      float: right;
    }
    :deep(.el-input, .el-select) {
      width: 260px;
    }
  }
  .container-table {
    @extend .panel;
    padding: 0px 0px 0px 0px;
    margin-top: 16px;
  }
}
</style>
